<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<table id="role_table">
    <thead>
    <th data-options="field:'id'">ID</th>
    <th data-options="field:'name'">角色</th>
    <th data-options="field:'remark'">备注</th>
    </thead>
</table>
<div id="role-tool">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="doRoleAdd()">添加</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="doRoleUpdate()">修改</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"
       onclick="doMenuAssign()">分配菜单</a>
</div>
<div id="role-dialog" class="easyui-dialog" title="编辑角色"
     data-options="modal:true,closed:true,href:'<%=request.getContextPath()%>/role.html?act=go_edit',footer:'#role-buttons'"
     style="width:400px;height: 300px">
</div>
<div id="role-buttons" style="padding:5px 15px 5px 0px;text-align: right">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="submitRoleForm()">提交</a>
    <a href="#" class="easyui-linkbutton" onclick="$('#role-dialog').dialog('close')">取消</a>
</div>

<div id="role-menu-dialog" class="easyui-dialog" title="分配权限" style="width:400px;height: 300px" closed="true"
     modal="true" data-options="footer:'#role-menu-buttons'">
    <ul id="role-menu-tree" class="easyui-tree"></ul>
</div>
<div id="role-menu-buttons" style="padding:5px 15px 5px 0px;text-align: right">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="submitRoleMenu()">提交</a>
    <a href="#" class="easyui-linkbutton" onclick="$('#role-menu-dialog').dialog('close')">取消</a>
</div>

<script type="text/javascript">
    $(function () {
        $("#role_table").datagrid({
            url: "<%=request.getContextPath()%>/role.html?act=list",
            singleSelect: true,
            toolbar: "#role-tool"
        });
    });

    function doRoleAdd() {
        $("#role-dialog").dialog("open")
    }

    function submitRoleForm() {
        $.ajax({
            url: "<%=request.getContextPath()%>/role.html?act=edit",
            data: $("#role-form").serialize(),
            method: "post",
            success: function (data) {
                if (data.status) {
                    $("#role-dialog").dialog("close");
                    $("#role_table").datagrid("load");
                } else {
                    alert(data.message);
                }
            }
        })
    }

    function doRoleUpdate() {
        var row = $("#role_table").datagrid("getSelected");
        if (row == null || row.length == 0) {
            return;
        }
        $("#role-dialog").dialog({
            onLoad: function () {
                $("#role-form").form("load", {
                    id: row.id,
                    name: row.name,
                    remark: row.remark,
                    status: row.status
                })
            }
        }).dialog("open");
    }

    function doMenuAssign() {
        var row = $("#role_table").datagrid("getSelected");
        if (row == null || row.length == 0) {
            return;
        }
        $.ajax({
            url: "<%=request.getContextPath()%>/role.html?act=role_menu",
            data: "roleId=" + row.id,
            success: function (menuIds) {
                $("#role-menu-tree").tree({
                    url: "<%=request.getContextPath()%>/role.html?act=menu_list",
                    method: "post",
                    checkbox: true,
                    onLoadSuccess: function (node, data) {
                        for (var i = 0; i < menuIds.length; i++) {
                            var nodeMenu = $("#role-menu-tree").tree("find", menuIds[i]);
                            if ($("#role-menu-tree").tree("isLeaf", nodeMenu.target)) {
                                $("#role-menu-tree").tree("check", nodeMenu.target);
                            }
                        }
                        $("#role-menu-dialog").dialog("open")
                    }
                });
            }
        })

    }

    function submitRoleMenu() {
        var row = $("#role_table").datagrid("getSelected");
        var menuIds = new Array();
        $($("#role-menu-tree").tree("getChecked", ['checked', 'indeterminate'])).each(function (i, node) {
            menuIds[i] = node["id"];
        });
        $.ajax({
            url: "<%=request.getContextPath()%>/role.html?act=assign_menu",
            data: {roleId: row["id"], menuIds: menuIds.join(",")},
            method: "post",
            success: function (data) {
                if (data.status) {
                    $("#role-menu-dialog").dialog("close");
                } else {
                    alert(data.message);
                }
            }
        })
    }
</script>